<script setup xmlns="http://www.w3.org/1999/html" xmlns:el-cascader="http://www.w3.org/1999/html">
// import {Delete, Edit} from "@element-plus/icons-vue";
import {ref} from "vue"
import {View} from "@element-plus/icons-vue";
import router from "@/router";

const activity = ref('')
const activitySquare = ref('first')
const activityName = ref('')
const gender = ref('')
const chakan =()=> {
    router.push('/square/viewDetails')
}
const chakan1 =()=> {
    router.push('/square/viewSchool')
}
const options =  [
    {
    value: 'beijing',
    label: '北京市',
    children:[{
        value: 'dongcheng',
        label: '东城区'
    }],
},
    {
        value: 'sichuan',
        label: '四川省',
        children:[{
            value: 'meishan',
            label: '眉山市',
            children: [
                {
                    value: 'pengshan',
                    label: '彭山区',
                },
                {
                    value: 'dongpo',
                    label: '东坡区',
                },
                ],
        }],
    },
];
const tableData = [{
        num:'1',
        name:'huodongmingchenghuodongmingcheng',
        year:'2024年',
        place:'四川省/眉山市/彭山区',
        star:'2024/7/4',
        end:'2024/7/13',
        ori:'jinjiangxeyuan',
        people:'主任',
        op:'',
    },
    {
        num:'2',
        name:'shixunshixunshixunshixun',
        year:'2024年',
        place:'四川省/眉山市/彭山区',
        star:'2024/7/4',
        end:'2024/7/13',
        ori:'jinjiangxeyuan',
        people:'主任',
        op:'',
    },
    {
        num:'3',
        name:'chikaorouchihuoguochishaokao',
        year:'2024年',
        place:'四川省/眉山市/彭山区',
        star:'2024/7/4',
        end:'2024/7/13',
        ori:'jinjiangxeyuan',
        people:'主任',
        op:'',
    },
];
</script>

<template>
    <div class="Square">
        <el-container>
            <el-header>
                <p class="text-left">活动广场</p>
            </el-header>

    <el-tabs
        v-model="activitySquare"
        type="border-card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane label="招宣活动" name="first">
            <el-tabs v-model="state" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="进行中" name="first"></el-tab-pane>
                <el-tab-pane label="已结束" name="second"></el-tab-pane>
            </el-tabs>
            <!--进行中的活动表单-->
            <el-form inline>
                <el-form-item>
                    <el-input v-model="activity" placeholder="请输入活动名称查询"  size="small"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select placeholder="是否招宣年度" v-model="gender"  size="small">
                        <el-option label="2024年" value="2024"></el-option>
                        <el-option label="2023年" value="2023"></el-option>
                        <el-option label="2022年" value="2022"></el-option>
                        <el-option label="2021年" value="2021"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-cascader :options="options"  placeholder="请选择省/市/区"  size="small" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="activityName" placeholder="请输入姓名/工号查询"  size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetParams">重置</el-button>
                    <el-button type="primary" @click="getUserList">查询</el-button>
                    <el-button type="primary" @click="showAddDialog('发布活动计划')" >发布活动计划</el-button>
                </el-form-item>
            </el-form>
<!--            内容表单-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="num" label="序号" width="55" />
                <el-table-column prop="name" label="活动名称" width="245" />
                <el-table-column prop="year" label="活动年度"  width="80" />
                <el-table-column prop="place" label="活动区域" width="170"/>
                <el-table-column prop="star" label="计划开始时间" />
                <el-table-column prop="end" label="计划结束时间" />
                <el-table-column prop="ori" label="活动来源" />
                <el-table-column prop="people" label="活动成员" />
                <el-table-column prop="op" label="操作" width="180">
                <template #default="{ row }">
                    <el-button  size="mini" @click="chakan" >查看</el-button>
                    <el-button  size="mini" @click="xiangxi" >详细</el-button>
                </template>
                </el-table-column>
            </el-table>
<!--母校行页面-->
        </el-tab-pane>
        <el-tab-pane label="母校行" name="second">
            <el-tabs v-model="state" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="进行中" name="first"></el-tab-pane>
                <el-tab-pane label="已结束" name="second"></el-tab-pane>
            </el-tabs>
            <!--进行中的活动表单-->
            <el-form inline>
                <el-form-item>
                    <el-input v-model="activity" placeholder="请输入活动名称查询"  size="small"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select placeholder="是否招宣年度" v-model="gender"  size="small">
                        <el-option label="2024年" value="2024"></el-option>
                        <el-option label="2023年" value="2023"></el-option>
                        <el-option label="2022年" value="2022"></el-option>
                        <el-option label="2021年" value="2021"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-cascader :options="options"  placeholder="请选择省/市/区"  size="small" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="activityName" placeholder="请输入姓名/工号查询"  size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetParams">重置</el-button>
                    <el-button type="primary" @click="getUserList">查询</el-button>
                    <el-button type="primary" @click="showAddDialog('发布活动计划')" >发布活动计划</el-button>
                </el-form-item>
            </el-form>
            <!--            内容表单-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="num" label="序号" width="55" />
                <el-table-column prop="name" label="活动名称" width="245" />
                <el-table-column prop="year" label="活动年度"  width="80" />
                <el-table-column prop="place" label="活动区域" width="170"/>
                <el-table-column prop="star" label="计划开始时间" />
                <el-table-column prop="end" label="计划结束时间" />
                <el-table-column prop="ori" label="活动来源" />
                <el-table-column prop="people" label="活动成员" />
                <el-table-column prop="op" label="操作" width="180">
                    <template #default="{ row }">
                        <el-button  size="mini" @click="chakan1" >查看</el-button>
                        <el-button  size="mini" @click="xiangxi" >详细</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
        </el-container>
    </div>
<!--    分页条-->
    <div class="ye">
        <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="100" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" style="margin-top: 10px; justify-content: flex-end"
        />
    </div>




</template>

<style scoped lang="scss">
.Square {
    height: 100%;
    .demo-tabs {
        min-height: 100%;
        box-sizing: border-box;

        .el-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>
